<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
</head>
<body>
	<div id="test">
		<transition name="fade">
			<div class="aaa">
				<div v-if="ok">我有没有显示是受你控制的</div>
				<div v-else>NONONONONONONONONONO</div>
			</div>
		</transition>
		<button @click="toggleOk">点击我切换上面的div</button>
		<hr>
		<my-comp :login-type="logintype"></my-comp>
		<button @click="toggleInput">toggle text or email</button>

		<!-- <div>
			<div v-if="logintype === logintype1">
				<label>Username</label><input placeholder="Enter your username" key="username-input">
			</div>
			<div v-else>
				<label>Email</label><input placeholder="Enter your email address" key="email-input">
			</div>
		</div> -->
		<!-- <button @click="toggleInput">toggle text or email</button> -->
	</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
	// import test from "./components/test";
	Vue.component('my-comp',{
		props: {
			loginType:{
				type:String,
				default: 'username'
			}
		},
		data() {
			return{
				logintype1:'username',
			}
		},
		template:'<div v-if="loginType === logintype1"><label>Username</label><input placeholder="Enter your username" key="2" ></div>'+
		'<div v-else><label>Email</label><input placeholder="Enter your email address" key="1"></div>'
	});

	var test = new Vue({
		el:'#test',
		data() {
			return{
				ok: false,
				logintype: 'aaaa',
				logintype1:'username',
			}
		},

		methods: {
			toggleOk() {
				this.ok = !this.ok;
			},

			toggleInput() {
				if(this.logintype === this.logintype1){
					this.logintype = 'email';
				}else{
					this.logintype = 'username';
				}
				console.log(this.logintype+' ===== '+ this.logintype1);
			}
		},
	});

</script>

<style>
	/*body,html{
		background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
		height: 100%;
	}*/

	.fade-enter-to, .fade-leave-to{
		transition: opacity .5s
	}

	.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
		opacity: 0
	}
	
</style>

</html>